<template>
  <div id="app">
    <router-view class="template-main" />
  </div>
</template>
<script>
import DevicePixelRatio from './common/DevicePixelRatio';
export default {
  created() {
    new DevicePixelRatio().init();
	},
  mounted () {
    window.onresize = () => {
      return (() => {
        this.detectZoom()
      })()
    };
  },
  methods:{
    detectZoom (){ 
      var ratio = 0,
      screen = window.screen,
      ua = navigator.userAgent.toLowerCase();
      if (window.devicePixelRatio !== undefined) {
          ratio = window.devicePixelRatio;
      } else if (~ua.indexOf('msie')) {  
        if (screen.deviceXDPI && screen.logicalXDPI) {
          ratio = screen.deviceXDPI / screen.logicalXDPI;
        }
      } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth;
      }
      if (ratio){
        ratio = Math.round(ratio * 100);
      }
      return ratio
    },
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>
